<template>
    <div class="biz-content">
        <biz-header
            ref="commonHeader"
            @exception="exceptionHandler"
            @saveDeploymentSuccess="saveDeploymentSuccess"
            @switchVersion="initResource">
        </biz-header>
        <template>
            <div class="biz-content-wrapper biz-confignation-wrapper" v-bkloading="{ isLoading: isTemplateSaving }">
                <app-exception
                    v-if="exceptionCode && !isDataLoading"
                    :type="exceptionCode.code"
                    :text="exceptionCode.msg">
                </app-exception>
                <div class="biz-tab-box" v-else v-show="!isDataLoading">
                    <biz-tabs @tab-change="tabResource" ref="commonTab"></biz-tabs>
                    <div class="biz-tab-content" v-bkloading="{ isLoading: isTabChanging }">
                        <template v-if="!deployments.length">
                            <div class="biz-guide-box mt0">
                                <button class="bk-button bk-primary" @click.stop.prevent="addLocalApplication">
                                    <i class="bk-icon icon-plus"></i>
                                    <span style="margin-left: 0;">添加Deployment</span>
                                </button>
                            </div>
                        </template>

                        <template v-else>
                            <div class="biz-configuration-topbar">
                                <div class="biz-list-operation">
                                    <div class="item" v-for="(application, index) in deployments" :key="application.id">
                                        <button :class="['bk-button', { 'bk-primary': curApplication.id === application.id }]" @click.stop="setCurApplication(application, index)">
                                            {{(application && application.config.metadata.name) || '未命名'}}
                                            <span class="biz-update-dot" v-show="application.isEdited"></span>
                                        </button>
                                        <span class="bk-icon icon-close" @click.stop="removeApplication(application, index)"></span>
                                    </div>

                                    <bk-tooltip
                                        ref="applicationTooltip"
                                        :content="'添加Deployment'"
                                        placement="top">
                                        <button class="bk-button bk-default is-outline is-icon" @click.stop="addLocalApplication">
                                            <i class="bk-icon icon-plus"></i>
                                        </button>
                                    </bk-tooltip>
                                </div>
                            </div>

                            <div class="biz-configuration-content" style="position: relative;">
                                <!-- part1 start -->
                                <div class="bk-form biz-configuration-form">
                                    <a href="javascript:void(0);" class="bk-text-button from-json-btn" @click.stop.prevent="showJsonPanel">导入YAML</a>

                                    <bk-sideslider
                                        :is-show.sync="toJsonDialogConf.isShow"
                                        :title="toJsonDialogConf.title"
                                        :width="toJsonDialogConf.width"
                                        :quick-close="false"
                                        class="biz-app-container-tojson-sideslider"
                                        @hidden="closeToJson">
                                        <div slot="content" style="position: relative;">
                                            <div class="biz-log-box" :style="{ height: `${winHeight - 60}px` }" v-bkloading="{ isLoading: toJsonDialogConf.loading }">
                                                <bk-button class="bk-button bk-primary save-json-btn" @click.stop.prevent="saveApplicationJson">导入</bk-button>
                                                <bk-button class="bk-button bk-default hide-json-btn" @click.stop.prevent="hideApplicationJson">取消</bk-button>
                                                <ace
                                                    :value="editorConfig.value"
                                                    :width="editorConfig.width"
                                                    :height="editorConfig.height"
                                                    :lang="editorConfig.lang"
                                                    :read-only="editorConfig.readOnly"
                                                    :full-screen="editorConfig.fullScreen"
                                                    @init="editorInitAfter">
                                                </ace>
                                            </div>
                                        </div>
                                    </bk-sideslider>

                                    <div class="bk-form-item">
                                        <div class="bk-form-item">
                                            <div class="bk-form-content" style="margin-left: 0;">
                                                <div class="bk-form-inline-item is-required">
                                                    <label class="bk-label" style="width: 105px;">应用名称：</label>
                                                    <div class="bk-form-content" style="margin-left: 105px;">
                                                        <div class="bk-form-input-group">
                                                            <input type="text" :class="['bk-form-input',{ 'is-danger': errors.has('applicationName') }]" placeholder="请输入30个字符以内" style="width: 310px;" v-model="curApplication.config.metadata.name" maxlength="30" name="applicationName" v-validate="{ required: true, regex: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/ }">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="bk-form-inline-item is-required">
                                                    <label class="bk-label" style="width: 105px;">实例数量：</label>
                                                    <div class="bk-form-content" style="margin-left: 105px;">
                                                        <div class="bk-form-input-group">
                                                            <bk-input
                                                                type="number"
                                                                placeholder="请输入"
                                                                style="width: 310px;"
                                                                :min="0"
                                                                :value.sync="curApplication.config.spec.replicas"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="bk-form-tip is-danger" style="margin-left: 105px;" v-if="errors.has('applicationName')">
                                                    <p class="bk-tip-text">名称必填，以小写字母或数字开头和结尾，只能包含：小写字母、数字、连字符(-)、点(.)</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bk-form-item">
                                        <label class="bk-label" style="width: 105px;">重要级别：</label>
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <label class="bk-form-radio">
                                                <input type="radio" name="monitorlevel" value="important" v-model="curApplication.config.monitorLevel">
                                                <i class="bk-radio-text">重要</i>
                                            </label>
                                            <label class="bk-form-radio">
                                                <input type="radio" name="monitorlevel" value="general" v-model="curApplication.config.monitorLevel">
                                                <i class="bk-radio-text">一般</i>
                                            </label>
                                            <label class="bk-form-radio">
                                                <input type="radio" name="monitorlevel" value="unimportant" v-model="curApplication.config.monitorLevel">
                                                <i class="bk-radio-text">不重要</i>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="bk-form-item">
                                        <label class="bk-label" style="width: 105px;">描述：</label>
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <textarea class="bk-form-textarea" placeholder="请输入256个字符以内" v-model="curApplication.desc" maxlength="256"></textarea>
                                        </div>
                                    </div>

                                    <div class="bk-form-item is-required">
                                        <label class="bk-label" style="width: 105px;">标签：</label>
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <bk-keyer
                                                ref="labelKeyer"
                                                :key-list.sync="curLabelList"
                                                :var-list="varList"
                                                :is-link-to-selector="true"
                                                :is-tip-change="isSelectorChange"
                                                :tip="'k8S使用选择器(spec.selector.matchLabels)关联资源，实例化后选择器的值不可变'"
                                                :can-disabled="true"
                                                @change="updateApplicationLabel">
                                                <slot>
                                                    <p class="biz-tip">小提示：K8S使用选择器（spec.selector.matchLabels）关联资源，必填，且实例化后选择器的值不可变</p>
                                                </slot>
                                            </bk-keyer>
                                        </div>
                                    </div>

                                    <div class="bk-form-item">
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <button :class="['bk-text-button f12 mb10 pl0', { 'rotate': isMorePanelShow }]" @click.stop.prevent="toggleMore">
                                                更多设置
                                                <i class="bk-icon icon-angle-double-down ml5"></i>
                                            </button>

                                            <button :class="['bk-text-button f12 mb10 pl0', { 'rotate': isPodPanelShow }]" @click.stop.prevent="togglePod">
                                                Pod模板设置
                                                <i class="bk-icon icon-angle-double-down ml5"></i>
                                            </button>
                                        </div>
                                        <bk-tab :type="'fill'" :active-name="'tab1'" :size="'small'" v-show="isMorePanelShow" style="margin-left: 105px;">
                                            <bk-tabpanel name="tab1" title="更新策略">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 155px;">类型：</label>
                                                        <div class="bk-form-content" style="margin-left: 155px;">
                                                            <label class="bk-form-radio">
                                                                <input type="radio" name="type" value="RollingUpdate" v-model="curApplication.config.spec.strategy.type">
                                                                <i class="bk-radio-text">滚动升级</i>
                                                            </label>
                                                            <label class="bk-form-radio">
                                                                <input type="radio" name="type" value="Recreate" v-model="curApplication.config.spec.strategy.type">
                                                                <i class="bk-radio-text">重新创建</i>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curApplication.config.spec.strategy.type === 'RollingUpdate'">
                                                        <label class="bk-label" style="width: 155px;">maxUnavailable：</label>
                                                        <div class="bk-form-content" style="margin-left: 155px;">
                                                            <bk-input
                                                                type="number"
                                                                placeholder="请输入"
                                                                style="width: 250px;"
                                                                :min="0"
                                                                :is-decimals="true"
                                                                :percent-enable="true"
                                                                :value.sync="curApplication.config.spec.strategy.rollingUpdate.maxUnavailable"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curApplication.config.spec.strategy.type === 'RollingUpdate'">
                                                        <label class="bk-label" style="width: 155px;">maxSurge：</label>
                                                        <div class="bk-form-content" style="margin-left: 155px;">
                                                            <bk-input
                                                                type="number"
                                                                placeholder="请输入"
                                                                style="width: 250px;"
                                                                :min="0"
                                                                :is-decimals="true"
                                                                :percent-enable="true"
                                                                :value.sync="curApplication.config.spec.strategy.rollingUpdate.maxSurge"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curApplication.config.spec.strategy.type === 'RollingUpdate'">
                                                        <label class="bk-label" style="width: 155px;">minReadySeconds：</label>
                                                        <div class="bk-form-content" style="margin-left: 155px;">
                                                            <div class="bk-form-input-group">
                                                                <bk-input
                                                                    type="number"
                                                                    placeholder="请输入"
                                                                    style="width: 215px;"
                                                                    :min="0"
                                                                    :value.sync="curApplication.config.spec.minReadySeconds"
                                                                    :list="varList"
                                                                >
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    秒
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>
                                        </bk-tab>

                                        <bk-tab :type="'fill'" :active-name="'tab2'" :size="'small'" v-show="isPodPanelShow" style="margin-left: 105px;">
                                            <bk-tabpanel name="tab2" title="备注">
                                                <div class="bk-form m20">
                                                    <bk-keyer :key-list.sync="curRemarkList" :var-list="varList" ref="remarkKeyer" @change="updateApplicationRemark"></bk-keyer>
                                                </div>
                                            </bk-tabpanel>
                                            <bk-tabpanel name="tab3" title="Restart策略">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">重启策略：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <label class="bk-form-radio" v-for="(policy, index) in restartPolicy" :key="index">
                                                                <input type="radio" name="restartPolicy" :value="policy" v-model="curApplication.config.spec.template.spec.restartPolicy">
                                                                <i class="bk-radio-text">{{policy}}</i>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>
                                            <bk-tabpanel name="tab4" title="Kill策略">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">宽期限：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <div class="bk-form-input-group">
                                                                <bk-input
                                                                    type="number"
                                                                    placeholder="请输入"
                                                                    style="width: 80px;"
                                                                    :min="0"
                                                                    :value.sync="curApplication.config.spec.template.spec.terminationGracePeriodSeconds"
                                                                    :list="varList"
                                                                >
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    秒
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab5" title="调度约束">
                                                <div class="bk-form m20">
                                                    <p class="title mb5">NodeSelector</p>
                                                    <bk-keyer
                                                        :key-list.sync="curConstraintLabelList"
                                                        ref="nodeSelectorKeyer" :var-list="varList"
                                                        @change="updateNodeSelectorList">
                                                    </bk-keyer>
                                                    <div>
                                                        <span class="title">亲和性约束</span>
                                                        <label class="bk-form-checkbox" style="margin-left: 10px;">
                                                            <input type="checkbox" name="image-get" v-model="curApplication.config.webCache.isUserConstraint">
                                                            启用
                                                        </label>
                                                    </div>

                                                    <div style="height: 300px;" v-if="curApplication.config.webCache.isUserConstraint">
                                                        <ace
                                                            :value="curApplication.config.webCache.affinityYaml"
                                                            :width="yamlEditorConfig.width"
                                                            :height="yamlEditorConfig.height"
                                                            :lang="yamlEditorConfig.lang"
                                                            :read-only="yamlEditorConfig.readOnly"
                                                            :full-screen="yamlEditorConfig.fullScreen"
                                                            @init="yamlEditorInitAfter"
                                                            @input="yamlEditorInput"
                                                            @blur="yamlEditorBlur">
                                                        </ace>
                                                    </div>

                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab6" title="网络">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">网络策略：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <bk-selector
                                                                style="width: 300px;"
                                                                placeholder="请选择"
                                                                :setting-key="'id'"
                                                                :display-key="'name'"
                                                                :selected.sync="curApplication.config.spec.template.spec.hostNetwork"
                                                                :list="netStrategyList"
                                                                @item-selected="changeDNSPolicy">
                                                            </bk-selector>
                                                        </div>
                                                    </div>
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">DNS策略：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <bk-selector
                                                                style="width: 300px;"
                                                                placeholder="请选择"
                                                                :setting-key="'id'"
                                                                :display-key="'name'"
                                                                :selected.sync="curApplication.config.spec.template.spec.dnsPolicy"
                                                                :list="dnsStrategyList">
                                                            </bk-selector>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="ta7" title="卷">
                                                <div class="bk-form m20">
                                                    <table class="biz-simple-table" style="width: 720px;">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 200px;">类型</th>
                                                                <th style="width: 220px;">挂载名</th>
                                                                <th style="width: 220px;">挂载源</th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="(volume, index) in curApplication.config.webCache.volumes" :key="index">
                                                                <td>
                                                                    <bk-selector
                                                                        placeholder="类型"
                                                                        :setting-key="'id'"
                                                                        :selected.sync="volume.type"
                                                                        :list="volumeTypeList"
                                                                        @item-selected="handlerChangeVolumeType(volume)">
                                                                    </bk-selector>
                                                                </td>
                                                                <td>
                                                                    <bk-input
                                                                        type="text"
                                                                        placeholder="请输入"
                                                                        :value.sync="volume.name"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </td>
                                                                <td>
                                                                    <template v-if="volume.type === 'emptyDir'">
                                                                        <input type="text" class="bk-form-input" :value="'{}'" disabled>
                                                                    </template>
                                                                    <template v-if="volume.type === 'emptyDir(Memory)'">
                                                                        <input type="text" class="bk-form-input" :value="'Memory'" disabled style="width: 75px;">
                                                                        <div class="bk-form-input-group" style="width: 135px;">
                                                                            <bk-input
                                                                                type="number"
                                                                                placeholder="sizeLimit"
                                                                                style="width: 98px;"
                                                                                :min="0"
                                                                                :value.sync="volume.source"
                                                                                :list="varList"
                                                                            >
                                                                            </bk-input>
                                                                            <span class="input-group-addon">
                                                                                Gi
                                                                            </span>
                                                                        </div>
                                                                    </template>
                                                                    <template v-else-if="volume.type === 'persistentVolumeClaim'">
                                                                        <bk-selector
                                                                            placeholder="PVC List"
                                                                            :setting-key="'id'"
                                                                            :searchable="true"
                                                                            :selected.sync="volume.source"
                                                                            :list="[]">
                                                                        </bk-selector>
                                                                    </template>
                                                                    <template v-else-if="volume.type === 'hostPath'">
                                                                        <input type="text" class="bk-form-input" v-model="volume.source" placeholder="请输入">
                                                                    </template>
                                                                    <template v-else-if="volume.type === 'configMap'">
                                                                        <bk-selector
                                                                            placeholder="Configmap List"
                                                                            :setting-key="'id'"
                                                                            :display-key="'name'"
                                                                            :searchable="true"
                                                                            :selected.sync="volume.source"
                                                                            :list="volumeConfigmapAllList"
                                                                            @item-selected="handlerVolumeConfigmap(volume, ...arguments)">
                                                                        </bk-selector>
                                                                    </template>
                                                                    <template v-else-if="volume.type === 'secret'">
                                                                        <bk-selector
                                                                            placeholder="Secret List"
                                                                            :setting-key="'name'"
                                                                            :display-key="'name'"
                                                                            :searchable="true"
                                                                            :selected.sync="volume.source"
                                                                            :list="volumeSecretList">
                                                                        </bk-selector>
                                                                    </template>
                                                                </td>
                                                                <td>
                                                                    <div class="action-box">
                                                                        <button class="action-btn ml5" @click.stop.prevent="addVolumn()">
                                                                            <i class="bk-icon icon-plus"></i>
                                                                        </button>
                                                                        <button class="action-btn" @click.stop.prevent="removeVolumn(volume, index)" v-show="curApplication.config.webCache.volumes.length > 1">
                                                                            <i class="bk-icon icon-minus"></i>
                                                                        </button>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </bk-tabpanel>
                                        </bk-tab>
                                    </div>
                                </div>
                                <!-- part1 end -->

                                <!-- part2 start -->
                                <div class="biz-part-header" style="margin-left: 105px;">
                                    <div class="bk-button-group">
                                        <div class="item" v-for="(container, index) in curApplication.config.spec.template.spec.allContainers" :key="index">
                                            <button :class="['bk-button bk-default is-outline', { 'is-selected': curContainerIndex === index }]" @click.stop="setCurContainer(container, index)">
                                                {{container.name || '未命名'}}
                                            </button>
                                            <span class="bk-icon icon-close-circle" @click.stop="removeContainer(index)" v-if="curApplication.config.spec.template.spec.allContainers.length > 1"></span>
                                        </div>
                                        <bk-tooltip ref="containerTooltip" :content="curApplication.config.spec.template.spec.allContainers.length >= 5 ? '最多添加5个' : '添加Container'" placement="top">
                                            <button type="button" class="bk-button bk-default is-outline is-icon" :disabled="curApplication.config.spec.template.spec.allContainers.length >= 5 " @click.stop.prevent="addLocalContainer">
                                                <i class="bk-icon icon-plus"></i>
                                            </button>
                                        </bk-tooltip>
                                    </div>
                                </div>

                                <div class="bk-form biz-configuration-form pb15">
                                    <div class="biz-span" style="margin-left: 105px;">
                                        <span class="title">基础信息</span>
                                    </div>
                                    <div class="bk-form-item is-required">
                                        <div class="bk-form-content" style="margin-left: 0">
                                            <div class="bk-form-inline-item is-required">
                                                <label class="bk-label" style="width: 105px;">容器名称：</label>
                                                <div class="bk-form-content" style="margin-left: 105px;">
                                                    <input type="text" :class="['bk-form-input', { 'is-danger': errors.has('containerName') }]" placeholder="请输入30个字符以内" style="width: 310px;" v-model="curContainer.name" maxlength="30" name="containerName" v-validate="{ required: true, regex: /^[a-z]{1}[a-z0-9-]{0,29}$/ }">
                                                </div>
                                            </div>

                                            <div class="bk-form-inline-item">
                                                <label class="bk-label" style="width: 105px;">类型：</label>
                                                <div class="bk-form-content" style="margin-left: 105px;">
                                                    <label class="bk-form-radio">
                                                        <input type="radio" value="container" v-model="curContainer.webCache.containerType">
                                                        <i class="bk-radio-text">Container</i>
                                                    </label>
                                                    <label class="bk-form-radio">
                                                        <input type="radio" value="initContainer" v-model="curContainer.webCache.containerType">
                                                        <i class="bk-radio-text">InitContainer</i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bk-form-item">
                                        <label class="bk-label" style="width: 105px;">描述：</label>
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <textarea name="" id="" cols="30" rows="10" class="bk-form-textarea" placeholder="请输入256个字符以内" v-model="curContainer.webCache.desc" maxlength="256"></textarea>
                                        </div>
                                    </div>
                                    <div class="bk-form-item is-required">
                                        <label class="bk-label" style="width: 105px;">镜像及版本：</label>
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <div class="bk-dropdown-box" style="width: 250px;" @click="initImageList">
                                                <bk-input
                                                    type="text"
                                                    placeholder="镜像"
                                                    :display-key="'_name'"
                                                    :setting-key="'_id'"
                                                    :search-key="'_name'"
                                                    :value.sync="curContainer.webCache.imageName"
                                                    :list="varList"
                                                    :is-link="true"
                                                    :is-select-mode="true"
                                                    :default-list="imageList"
                                                    @item-selected="changeImage(...arguments, curContainer)"
                                                >
                                                </bk-input>
                                            </div>

                                            <div class="bk-dropdown-box" style="width: 221px;">
                                                <bk-input
                                                    type="text"
                                                    placeholder="版本号"
                                                    :display-key="'_name'"
                                                    :setting-key="'_id'"
                                                    :search-key="'_name'"
                                                    :value.sync="curContainer.imageVersion"
                                                    :list="varList"
                                                    :is-select-mode="true"
                                                    :default-list="imageVersionList"
                                                    :disabled="!curContainer.webCache.imageName"
                                                    @item-selected="setImageVersion"
                                                >
                                                </bk-input>
                                            </div>

                                            <label class="bk-form-checkbox" style="margin-left: 10px;">
                                                <input
                                                    type="checkbox"
                                                    name="image-get"
                                                    value="Always"
                                                    v-model="isAlwayCheckImage"
                                                    @click="changeImagePullPolicy">
                                                <i class="bk-checkbox-text">总是在创建之前拉取镜像</i>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="biz-span" style="margin-left: 105px;">
                                        <span class="title">端口映射</span>
                                    </div>

                                    <div class="bk-form-item">
                                        <div class="bk-form-content" style="margin-left: 105px;">
                                            <table class="biz-simple-table">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 330px;">名称</th>
                                                        <th style="width: 135px;">容器端口</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="(port, index) in curContainer.ports" :key="index">
                                                        <td>
                                                            <bk-input
                                                                type="text"
                                                                placeholder="名称"
                                                                style="width: 325px;"
                                                                maxlength="255"
                                                                :value.sync="port.name"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </td>
                                                        <td>
                                                            <bk-input
                                                                type="number"
                                                                placeholder="1-65535"
                                                                style="width: 135px;"
                                                                :value.sync="port.containerPort"
                                                                :min="1"
                                                                :max="65535"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </td>
                                                        <td>
                                                            <button class="action-btn" @click.stop.prevent="addPort">
                                                                <i class="bk-icon icon-plus"></i>
                                                            </button>
                                                            <button class="action-btn" v-if="curContainer.ports.length > 1" @click.stop.prevent="removePort(port, index)">
                                                                <i class="bk-icon icon-minus"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="biz-span" style="margin-left: 105px;">
                                        <div class="title">
                                            <button :class="['bk-text-button fb', { 'rotate': isPartBShow }]" @click.stop.prevent="togglePartB">
                                                更多设置<i class="bk-icon icon-angle-double-down f12 ml5 mb10 fb"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div style="margin-left: 105px;" v-show="isPartBShow">
                                        <bk-tab :type="'fill'" :active-name="'tab1'" :size="'small'">
                                            <bk-tabpanel name="tab1" title="命令">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 130px;">启动命令：</label>
                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                            <bk-input
                                                                type="text"
                                                                placeholder="多个命令用空格分隔"
                                                                :value.sync="curContainer.command"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 130px;">命令参数：</label>
                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                            <bk-input
                                                                type="text"
                                                                placeholder="多个参数用空格分隔"
                                                                :value.sync="curContainer.args"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 130px;">工作目录：</label>
                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                            <bk-input
                                                                type="text"
                                                                placeholder="例如/mywork"
                                                                :value.sync="curContainer.workingDir"
                                                                :list="varList"
                                                            >
                                                            </bk-input>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab2" title="挂载卷">
                                                <div class="bk-form m20">
                                                    <table class="biz-simple-table" v-if="curApplication.config.webCache.volumes.length">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 200px;">卷</th>
                                                                <th style="width: 300px;">容器目录</th>
                                                                <th style="width: 200px;">子目录</th>
                                                                <th style="width: 70px;"></th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="(volumeItem, index) in curContainer.volumeMounts" :key="index">
                                                                <td>
                                                                    <bk-selector
                                                                        placeholder="请选择"
                                                                        :setting-key="'name'"
                                                                        :display-key="'name'"
                                                                        :allow-clear="true"
                                                                        :selected.sync="volumeItem.name"
                                                                        :list="curMountVolumes"
                                                                        @item-selected="selectVolumeType(volumeItem)">
                                                                    </bk-selector>
                                                                </td>
                                                                <td>
                                                                    <bk-input
                                                                        type="text"
                                                                        placeholder="MountPath"
                                                                        maxlength="512"
                                                                        :value.sync="volumeItem.mountPath"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </td>
                                                                <td>
                                                                    <bk-input
                                                                        type="text"
                                                                        placeholder="SubPath"
                                                                        maxlength="200"
                                                                        :value.sync="volumeItem.subPath"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </td>
                                                                <td>
                                                                    <div class="biz-input-wrapper">
                                                                        <label class="bk-form-checkbox">
                                                                            <input type="checkbox" v-model="volumeItem.readOnly">
                                                                            <i class="bk-checkbox-text">只读</i>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <div class="action-box">
                                                                    <button class="action-btn ml5" @click.stop.prevent="addMountVolumn()">
                                                                        <i class="bk-icon icon-plus"></i>
                                                                    </button>
                                                                    <button class="action-btn" @click.stop.prevent="removeMountVolumn(volumeItem, index)" v-show="curContainer.volumeMounts.length > 1">
                                                                        <i class="bk-icon icon-minus"></i>
                                                                    </button>
                                                                </div>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <div v-else class="tc p30">
                                                        请先在Pod模板设置中配置卷列表
                                                    </div>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab3" title="环境变量">
                                                <div class="bk-form m20">
                                                    <table class="biz-simple-table" style="width: 690px;">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 160px;">类型</th>
                                                                <th style="width: 220px;">变量键</th>
                                                                <th style="width: 220px;">变量值</th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="(env, index) in curContainer.webCache.env_list" :key="index">
                                                                <td>
                                                                    <bk-selector
                                                                        placeholder="类型"
                                                                        :setting-key="'id'"
                                                                        :selected.sync="env.type"
                                                                        :list="mountTypeList">
                                                                    </bk-selector>
                                                                </td>
                                                                <td v-if="['valueFrom', 'custom', 'configmapKey', 'secretKey'].includes(env.type)">
                                                                    <bk-input
                                                                        type="text"
                                                                        placeholder="请输入"
                                                                        :value.sync="env.key"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </td>
                                                                <td :colspan="['valueFrom', 'custom', 'configmapKey', 'secretKey'].includes(env.type) ? 1 : 2">
                                                                    <template v-if="['valueFrom', 'custom'].includes(env.type)">
                                                                        <bk-input
                                                                            type="text"
                                                                            placeholder="例如：/metadata/name"
                                                                            :value.sync="env.value"
                                                                            :list="varList"
                                                                        >
                                                                        </bk-input>
                                                                    </template>
                                                                    <template v-else-if="['configmapKey'].includes(env.type)">
                                                                        <bk-selector
                                                                            placeholder="请选择"
                                                                            :setting-key="'id'"
                                                                            :selected.sync="env.value"
                                                                            :list="configmapKeyList"
                                                                            @item-selected="updateEnvItem(...arguments, env)">
                                                                        </bk-selector>
                                                                    </template>
                                                                    <template v-else-if="['secretKey'].includes(env.type)">
                                                                        <bk-selector
                                                                            placeholder="请选择"
                                                                            :setting-key="'id'"
                                                                            :selected.sync="env.value"
                                                                            :list="secretKeyList"
                                                                            @item-selected="updateEnvItem(...arguments, env)">
                                                                        </bk-selector>
                                                                    </template>
                                                                    <template v-else-if="['configmapFile'].includes(env.type)">
                                                                        <bk-selector
                                                                            placeholder="Configmap列表"
                                                                            :setting-key="'name'"
                                                                            :selected.sync="env.value"
                                                                            :list="volumeConfigmapList">
                                                                        </bk-selector>
                                                                    </template>
                                                                    <template v-else-if="['secretFile'].includes(env.type)">
                                                                        <bk-selector
                                                                            placeholder="Secret列表"
                                                                            :setting-key="'name'"
                                                                            :selected.sync="env.value"
                                                                            :list="volumeSecretList">
                                                                        </bk-selector>
                                                                    </template>
                                                                </td>
                                                                <td>
                                                                    <div class="action-box">
                                                                        <button class="action-btn ml5" @click.stop.prevent="addEnv()">
                                                                            <i class="bk-icon icon-plus"></i>
                                                                        </button>
                                                                        <button class="action-btn" @click.stop.prevent="removeEnv(env, index)" v-show="curContainer.webCache.env_list.length > 1">
                                                                            <i class="bk-icon icon-minus"></i>
                                                                        </button>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab4" title="资源限制">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">特权：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <label class="bk-form-checkbox">
                                                                <input type="checkbox" v-model="curContainer.securityContext.privileged">
                                                                <i class="bk-checkbox-text">可完全访问母机资源</i>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">CPU：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <div class="bk-form-input-group mr5">
                                                                <span class="input-group-addon is-left">
                                                                    requests
                                                                </span>
                                                                <bk-input
                                                                    type="number"
                                                                    style="width: 100px;"
                                                                    :min="0"
                                                                    :max="curContainer.resources.limits.cpu ? curContainer.resources.limits.cpu : Number.MAX_VALUE"
                                                                    placeholder="请输入"
                                                                    :value.sync="curContainer.resources.requests.cpu"
                                                                    :list="varList"
                                                                >
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    m
                                                                </span>
                                                            </div>
                                                            <bk-tooltip content="设置CPU下限，1000m=1核CPU" placement="top">
                                                                <span class="bk-badge">
                                                                    <i class="bk-icon icon-question"></i>
                                                                </span>
                                                            </bk-tooltip>

                                                            <div class="bk-form-input-group ml20 mr5">
                                                                <span class="input-group-addon is-left">
                                                                    limits
                                                                </span>
                                                                <bk-input
                                                                    type="number"
                                                                    style="width: 100px;"
                                                                    :min="0"
                                                                    placeholder="请输入"
                                                                    :value.sync="curContainer.resources.limits.cpu"
                                                                    :list="varList">
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    m
                                                                </span>
                                                            </div>
                                                            <bk-tooltip content="设置CPU上限，1000m=1核CPU" placement="top">
                                                                <span class="bk-badge">
                                                                    <i class="bk-icon icon-question"></i>
                                                                </span>
                                                            </bk-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 105px;">内存：</label>
                                                        <div class="bk-form-content" style="margin-left: 105px;">
                                                            <div class="bk-form-input-group mr5">
                                                                <span class="input-group-addon is-left">
                                                                    requests
                                                                </span>
                                                                <bk-input
                                                                    type="number"
                                                                    style="width: 100px;"
                                                                    :min="0"
                                                                    :max="curContainer.resources.limits.memory ? curContainer.resources.limits.memory : Number.MAX_VALUE"
                                                                    placeholder="请输入"
                                                                    :value.sync="curContainer.resources.requests.memory"
                                                                    :list="varList"
                                                                >
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    Mi
                                                                </span>
                                                            </div>
                                                            <bk-tooltip content="设置内存下限" placement="top">
                                                                <span class="bk-badge">
                                                                    <i class="bk-icon icon-question"></i>
                                                                </span>
                                                            </bk-tooltip>

                                                            <div class="bk-form-input-group ml20 mr5">
                                                                <span class="input-group-addon is-left">
                                                                    limits
                                                                </span>
                                                                <bk-input
                                                                    type="number"
                                                                    style="width: 100px;"
                                                                    :min="0"
                                                                    placeholder="请输入"
                                                                    :value.sync="curContainer.resources.limits.memory"
                                                                    :list="varList">
                                                                </bk-input>
                                                                <span class="input-group-addon">
                                                                    Mi
                                                                </span>
                                                            </div>
                                                            <bk-tooltip content="设置内存上限" placement="top">
                                                                <span class="bk-badge">
                                                                    <i class="bk-icon icon-question"></i>
                                                                </span>
                                                            </bk-tooltip>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab5" title="健康检查">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 120px;">类型：</label>
                                                        <div class="bk-form-content" style="margin-left: 120px">
                                                            <div class="bk-dropdown-box" style="width: 250px;">
                                                                <bk-selector
                                                                    placeholder="请选择"
                                                                    :setting-key="'id'"
                                                                    :display-key="'name'"
                                                                    :selected.sync="curContainer.webCache.livenessProbeType"
                                                                    :list="healthCheckTypes">
                                                                </bk-selector>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.livenessProbeType && curContainer.webCache.livenessProbeType !== 'EXEC'">
                                                        <label class="bk-label" style="width: 120px;">端口名称：</label>
                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                            <div class="bk-dropdown-box" style="width: 250px;">
                                                                <bk-selector
                                                                    placeholder="请选择"
                                                                    :setting-key="'name'"
                                                                    :display-key="'name'"
                                                                    :selected="livenessProbePortName"
                                                                    :list="portList"
                                                                    @item-selected="livenessProbePortNameSelect">
                                                                </bk-selector>
                                                            </div>
                                                            <span class="biz-guard-tip ml10 bk-default" v-if="!portList.length">请先配置完整的端口映射</span>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.livenessProbeType && (curContainer.webCache.livenessProbeType === 'HTTP')">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">请求路径：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 521px;"
                                                                        placeholder="例如：/healthcheck"
                                                                        :value.sync="curContainer.livenessProbe.httpGet.path"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.livenessProbeType && curContainer.webCache.livenessProbeType === 'EXEC'">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">检查命令：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 521px;"
                                                                        placeholder="例如：/tmp/check.sh，多个命令用空格分隔"
                                                                        :value.sync="curContainer.livenessProbe.exec.command"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.livenessProbeType && curContainer.webCache.livenessProbeType === 'HTTP'">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">设置Header：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-keyer
                                                                        ref="livenessProbeHeaderKeyer"
                                                                        :var-list="varList"
                                                                        :key-list.sync="livenessProbeHeaders"
                                                                        @change="updateLivenessHeader">
                                                                    </bk-keyer>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <template>
                                                        <button :class="['bk-text-button mt10 f12 mb10', { 'rotate': isPartCShow }]" style="margin-left: 114px;" @click.stop.prevent="togglePartC">
                                                            高级设置<i class="bk-icon icon-angle-double-down ml5"></i>
                                                        </button>
                                                        <div v-show="isPartCShow">
                                                            <div class="bk-form-item">
                                                                <div class="bk-form-content" style="margin-left: 0">
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 120px;">初始化超时：</label>
                                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.livenessProbe.initialDelaySeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">检查间隔：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.livenessProbe.periodSeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">检查超时：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.livenessProbe.timeoutSeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="bk-form-item">
                                                                <div class="bk-form-content" style="margin-left: 0">
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 120px;">不健康阈值：</label>
                                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    :min="1"
                                                                                    placeholder="请输入"
                                                                                    :value.sync="curContainer.livenessProbe.failureThreshold"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    次失败
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">健康阈值：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    :min="1"
                                                                                    placeholder="请输入"
                                                                                    :value.sync="curContainer.livenessProbe.successThreshold"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    次成功
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab5-1" title="就绪检查">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <label class="bk-label" style="width: 120px;">类型：</label>
                                                        <div class="bk-form-content" style="margin-left: 120px">
                                                            <div class="bk-dropdown-box" style="width: 250px;">
                                                                <bk-selector
                                                                    placeholder="请选择"
                                                                    :setting-key="'id'"
                                                                    :display-key="'name'"
                                                                    :selected.sync="curContainer.webCache.readinessProbeType"
                                                                    :list="healthCheckTypes">
                                                                </bk-selector>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.readinessProbeType && curContainer.webCache.readinessProbeType !== 'EXEC'">
                                                        <label class="bk-label" style="width: 120px;">端口名称：</label>
                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                            <div class="bk-dropdown-box" style="width: 250px;">
                                                                <bk-selector
                                                                    placeholder="请选择"
                                                                    :setting-key="'name'"
                                                                    :display-key="'name'"
                                                                    :selected="readinessProbePortName"
                                                                    :list="portList"
                                                                    @item-selected="readinessProbePortNameSelect">
                                                                </bk-selector>
                                                            </div>
                                                            <span class="biz-guard-tip ml10 bk-default" v-if="!portList.length">请先配置完整的端口映射</span>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.readinessProbeType && (curContainer.webCache.readinessProbeType === 'HTTP')">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">请求路径：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 521px;"
                                                                        placeholder="例如：/healthcheck"
                                                                        :value.sync="curContainer.readinessProbe.httpGet.path"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.readinessProbeType && curContainer.webCache.readinessProbeType === 'EXEC'">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">检查命令：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 521px;"
                                                                        placeholder="例如：/tmp/check.sh"
                                                                        :value.sync="curContainer.readinessProbe.exec.command"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bk-form-item" v-show="curContainer.webCache.readinessProbeType && curContainer.webCache.readinessProbeType === 'HTTP'">
                                                        <div class="bk-form-content" style="margin-left: 0">
                                                            <div class="bk-form-inline-item">
                                                                <label class="bk-label" style="width: 120px;">设置Header：</label>
                                                                <div class="bk-form-content" style="margin-left: 120px;">
                                                                    <bk-keyer ref="readinessProbeHeaderKeyer" :var-list="varList" :key-list.sync="readinessProbeHeaders" @change="updateReadinessHeader"></bk-keyer>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <template>
                                                        <button :class="['bk-text-button mt10 f12 mb10', { 'rotate': isPartCShow }]" style="margin-left: 114px;" @click.stop.prevent="togglePartC">
                                                            高级设置<i class="bk-icon icon-angle-double-down ml5"></i>
                                                        </button>
                                                        <div v-show="isPartCShow">
                                                            <div class="bk-form-item">
                                                                <div class="bk-form-content" style="margin-left: 0">
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 120px;">初始化超时：</label>
                                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.readinessProbe.initialDelaySeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">检查间隔：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.readinessProbe.periodSeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">检查超时：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.readinessProbe.timeoutSeconds"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    秒
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="bk-form-item">
                                                                <div class="bk-form-content" style="margin-left: 0">
                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 120px;">不健康阈值：</label>
                                                                        <div class="bk-form-content" style="margin-left: 120px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.readinessProbe.failureThreshold"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    次失败
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="bk-form-inline-item">
                                                                        <label class="bk-label" style="width: 130px;">健康阈值：</label>
                                                                        <div class="bk-form-content" style="margin-left: 130px;">
                                                                            <div class="bk-form-input-group">
                                                                                <bk-input
                                                                                    type="number"
                                                                                    style="width: 100px;"
                                                                                    placeholder="请输入"
                                                                                    :min="1"
                                                                                    :value.sync="curContainer.readinessProbe.successThreshold"
                                                                                    :list="varList"
                                                                                >
                                                                                </bk-input>
                                                                                <span class="input-group-addon">
                                                                                    次成功
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </template>

                                                </div>
                                            </bk-tabpanel>

                                            <bk-tabpanel name="tab7" title="生命周期">
                                                <div class="bk-form m20">
                                                    <div class="bk-form-item">
                                                        <div class="bk-form-content" style="margin-left: 20px">
                                                            <div class="bk-form-item">
                                                                <label class="bk-label" style="width: 105px;">停止前执行：</label>
                                                                <div class="bk-form-content" style="margin-left: 105px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 300px;"
                                                                        placeholder="多个命令用空格分隔"
                                                                        :value.sync="curContainer.lifecycle.preStop.exec.command"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                    <!-- <bk-tooltip content="多个命令用空格分隔" placement="top">
                                                                        <span class="bk-badge ml5">
                                                                            <i class="bk-icon icon-question"></i>
                                                                        </span>
                                                                    </bk-tooltip> -->
                                                                </div>
                                                            </div>
                                                            <div class="bk-form-item">
                                                                <label class="bk-label" style="width: 105px;">启动后执行：</label>
                                                                <div class="bk-form-content" style="margin-left: 105px;">
                                                                    <bk-input
                                                                        type="text"
                                                                        style="width: 300px;"
                                                                        placeholder="多个命令用空格分隔"
                                                                        :value.sync="curContainer.lifecycle.postStart.exec.command"
                                                                        :list="varList">
                                                                    </bk-input>
                                                                    <!-- <bk-tooltip content="多个命令用空格分隔" placement="top">
                                                                        <span class="bk-badge ml5">
                                                                            <i class="bk-icon icon-question"></i>
                                                                        </span>
                                                                    </bk-tooltip> -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </bk-tabpanel>
                                        </bk-tab>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import bkKeyer from '@open/components/keyer'
    import ace from '@open/components/ace-editor'
    import header from './header.vue'
    import tabs from './tabs.vue'
    import _ from 'lodash'
    import yamljs from 'js-yaml'
    import mixinBase from '@open/mixins/configuration/mixin-base'
    import k8sBase from '@open/mixins/configuration/k8s-base'
    import applicationParams from '@open/json/k8s-deployment.json'
    import containerParams from '@open/json/k8s-container.json'

    export default {
        components: {
            ace,
            'bk-keyer': bkKeyer,
            'biz-header': header,
            'biz-tabs': tabs
        },
        mixins: [mixinBase, k8sBase],
        data () {
            return {
                isTabChanging: false,
                curImageData: {},
                winHeight: 0,
                curDesc: '',
                exceptionCode: null,
                isDataLoading: true,
                isDataSaveing: false,
                isPartAShow: false,
                isPartBShow: false,
                isPartCShow: false,
                imageIndex: -1,
                versionIndex: -1,
                appJsonValidator: null,
                isEditName: false,
                isEditDesc: false,
                appParamKeys: [],
                keyList: [],
                curApplicationLinkLabels: [],
                livenessProbeHeaders: [],
                readinessProbeHeaders: [],
                isLoadingImageList: true,
                toJsonDialogConf: {
                    isShow: false,
                    title: '',
                    timer: null,
                    width: 800,
                    loading: false
                },
                editorConfig: {
                    width: '100%',
                    height: '100%',
                    lang: 'yaml',
                    readOnly: false,
                    fullScreen: false,
                    value: '',
                    editor: null
                },
                yamlEditorConfig: {
                    width: '100%',
                    height: '100%',
                    lang: 'yaml',
                    readOnly: false,
                    fullScreen: false,
                    value: '',
                    editor: null
                },
                netStrategyList: [
                    {
                        id: 0,
                        name: 'Cluster'
                    },
                    {
                        id: 1,
                        name: 'Host'
                    }
                ],
                netList: [
                    {
                        id: 'HOST',
                        name: 'HOST'
                    },
                    {
                        id: 'BRIDGE',
                        name: 'BRIDGE'
                    },
                    {
                        id: 'NONE',
                        name: 'NONE'
                    },
                    {
                        id: 'USER',
                        name: 'USER'
                    },
                    {
                        id: 'CUSTOM',
                        name: '自定义'
                    }
                ],
                constraintNameList: [
                    {
                        id: 'hostname',
                        name: 'Hostname'
                    },
                    {
                        id: 'InnerIP',
                        name: 'InnerIP'
                    }
                ],
                operatorList: [
                    {
                        id: 'CLUSTER',
                        name: 'CLUSTER'
                    },
                    {
                        id: 'GROUPBY',
                        name: 'GROUPBY'
                    },
                    {
                        id: 'LIKE',
                        name: 'LIKE'
                    },
                    {
                        id: 'UNLIKE',
                        name: 'UNLIKE'
                    },
                    {
                        id: 'UNIQUE',
                        name: 'UNIQUE'
                    },
                    {
                        id: 'MAXPER',
                        name: 'MAXPER'
                    }
                ],
                protocolList: [
                    {
                        id: 'HTTP',
                        name: 'HTTP'
                    },
                    {
                        id: 'TCP',
                        name: 'TCP'
                    },
                    {
                        id: 'UDP',
                        name: 'UDP'
                    }
                ],
                mountTypeList: [
                    {
                        id: 'custom',
                        name: '自定义'
                    },
                    {
                        id: 'valueFrom',
                        name: 'ValueFrom'
                    },
                    {
                        id: 'configmapKey',
                        name: 'Configmap单键'
                    },
                    {
                        id: 'configmapFile',
                        name: 'Configmap文件'
                    },
                    {
                        id: 'secretKey',
                        name: 'Secret单键'
                    },
                    {
                        id: 'secretFile',
                        name: 'Secret文件'
                    }
                ],
                volumeTypeList: [
                    {
                        id: 'emptyDir',
                        name: 'emptyDir'
                    },
                    {
                        id: 'emptyDir(Memory)',
                        name: 'emptyDir(Memory)'
                    },
                    // {
                    //     id: 'persistentVolumeClaim',
                    //     name: 'persistentVolumeClaim'
                    // },
                    {
                        id: 'hostPath',
                        name: 'hostPath'
                    },
                    {
                        id: 'configMap',
                        name: 'configMap'
                    },
                    {
                        id: 'secret',
                        name: 'secret'
                    }
                ],
                metricIndex: [],
                configmapList: [],
                configmapKeyList: [],
                secretKeyList: [],
                secretList: [],
                volumeConfigmapList: [],
                volumeSecretList: [],
                curApplicationId: 0,
                curApplication: applicationParams,
                curContainerIndex: 0,
                curContainer: applicationParams.config.spec.template.spec.allContainers[0],
                isAlwayCheckImage: false,
                yamlContainerWebcache: [],
                editTemplate: {
                    name: '',
                    desc: ''
                },
                imageList: [],
                imageVersionList: [],
                restartPolicy: ['Always', 'OnFailure', 'Never'],
                healthCheckTypes: [
                    {
                        id: 'HTTP',
                        name: 'HTTP'
                    },
                    {
                        id: 'TCP',
                        name: 'TCP'
                    },
                    {
                        id: 'EXEC',
                        name: 'EXEC'
                    }
                ],
                logList: [
                    {
                        value: ''
                    }
                ],
                isMorePanelShow: false,
                isPodPanelShow: false,
                strategy: 'Cluster',
                curApplicationCache: null
            }
        },
        computed: {
            volumeConfigmapAllList () {
                const list = [...this.volumeConfigmapList]
                this.existConfigmapList.forEach(item => {
                    list.push({
                        id: `${item.name}:${item.cluster_id}:${item.namespace}`,
                        name: `${item.name} (${item.cluster_name}-${item.namespace})`,
                        cluster_name: item.cluster_name,
                        cluster_id: item.cluster_id,
                        namespace: item.namespace
                    })
                })
                return list
            },
            isSelectorChange () {
                const curSelector = {}
                const list = this.curApplication.config.webCache.labelListCache
                list.forEach(item => {
                    if (item.isSelector) {
                        curSelector[item.key] = item.value
                    }
                })

                if (!this.curApplication.cache) {
                    return false
                }
                if (JSON.stringify(this.curApplication.cache.config.spec.selector.matchLabels) === '{}') {
                    return false
                }

                const selectorCache = this.curApplication.cache.config.spec.selector.matchLabels
                if (JSON.stringify(selectorCache) !== JSON.stringify(curSelector)) {
                    return true
                } else {
                    return false
                }
            },
            varList () {
                const list = this.$store.state.variable.varList
                list.forEach(item => {
                    item._id = item.key
                    item._name = item.key
                })
                return list
            },
            dnsStrategyList () {
                const netType = this.curApplication.config.spec.template.spec.hostNetwork
                let list

                if (netType === 0) {
                    list = [
                        {
                            id: 'ClusterFirst',
                            name: 'ClusterFirst'
                        },
                        {
                            id: 'Default',
                            name: 'Default'
                        },
                        {
                            id: 'None',
                            name: 'None'
                        }
                    ]
                } else {
                    list = [
                        {
                            id: 'ClusterFirstWithHostNet',
                            name: 'ClusterFirstWithHostNet'
                        },
                        {
                            id: 'Default',
                            name: 'Default'
                        },
                        {
                            id: 'None',
                            name: 'None'
                        }
                    ]
                }
                return list
            },
            curMountVolumes () {
                const results = this.curApplication.config.webCache.volumes.filter(item => {
                    return item.name
                })
                return results
            },
            metricList () {
                return this.$store.state.k8sTemplate.metricList
            },
            versionList () {
                const list = this.$store.state.k8sTemplate.versionList
                return list
            },
            isTemplateSaving () {
                return this.$store.state.k8sTemplate.isTemplateSaving
            },
            curTemplate () {
                return this.$store.state.k8sTemplate.curTemplate
            },
            deployments () {
                return this.$store.state.k8sTemplate.deployments
            },
            services () {
                return this.$store.state.k8sTemplate.services
            },
            configmaps () {
                return this.$store.state.k8sTemplate.configmaps
            },
            secrets () {
                return this.$store.state.k8sTemplate.secrets
            },
            daemonsets () {
                return this.$store.state.k8sTemplate.daemonsets
            },
            jobs () {
                return this.$store.state.k8sTemplate.jobs
            },
            statefulsets () {
                return this.$store.state.k8sTemplate.statefulsets
            },
            livenessProbePortName () {
                const healthParams = this.curContainer.livenessProbe
                const type = this.curContainer.webCache.livenessProbeType
                if (type === 'HTTP') {
                    return healthParams.httpGet.port
                } else if (type === 'TCP') {
                    return healthParams.tcpSocket.port
                } else {
                    return ''
                }
            },
            readinessProbePortName () {
                const healthParams = this.curContainer.readinessProbe
                const type = this.curContainer.webCache.readinessProbeType
                if (type === 'HTTP') {
                    return healthParams.httpGet.port
                } else if (type === 'TCP') {
                    return healthParams.tcpSocket.port
                } else {
                    return ''
                }
            },
            curVersion () {
                return this.$store.state.k8sTemplate.curVersion
            },
            templateId () {
                return this.$route.params.templateId
            },
            projectId () {
                return this.$route.params.projectId
            },
            projectCode () {
                return this.$route.params.projectCode
            },
            existConfigmapList () {
                return this.$store.state.k8sTemplate.existConfigmapList
            },
            portList () {
                const ports = this.curContainer.ports

                if (ports && ports.length) {
                    const results = ports.filter(port => {
                        return port.name && port.containerPort
                    })
                    return results
                } else {
                    return []
                }
            },
            curConstraintLabelList () {
                const keyList = []
                const nodes = this.curApplication.config.spec.template.spec.nodeSelector
                // 如果有缓存直接使用
                if (this.curApplication.config.webCache && this.curApplication.config.webCache.nodeSelectorList) {
                    return this.curApplication.config.webCache.nodeSelectorList
                }
                for (const [key, value] of Object.entries(nodes)) {
                    keyList.push({
                        key: key,
                        value: value
                    })
                }
                if (!keyList.length) {
                    keyList.push({
                        key: '',
                        value: ''
                    })
                }
                return keyList
            },
            curLabelList () {
                const keyList = []
                const labels = this.curApplication.config.spec.template.metadata.labels
                const selector = this.curApplication.config.spec.selector.matchLabels
                const linkLabels = this.curApplicationLinkLabels

                // 如果有缓存直接使用
                if (this.curApplication.config.webCache && this.curApplication.config.webCache.labelListCache) {
                    this.curApplication.config.webCache.labelListCache.forEach(item => {
                        const params = {
                            key: item.key,
                            value: item.value,
                            isSelector: item.isSelector,
                            disabled: false
                        }
                        keyList.push(params)
                    })
                    for (const params of keyList) {
                        const key = params.key
                        const value = params.value
                        for (const label of linkLabels) {
                            if (label.key === key && label.value === value) {
                                params.disabled = true
                                params.linkMessage = label.linkMessage
                            }
                        }
                    }
                    return keyList
                } else {
                    for (const [key, value] of Object.entries(labels)) {
                        const params = {
                            key: key,
                            value: value,
                            isSelector: false,
                            disabled: false,
                            linkMessage: ''
                        }
                        keyList.push(params)
                    }
                }
                for (const params of keyList) {
                    const key = params.key
                    const value = params.value

                    for (const [mKey, mValue] of Object.entries(selector)) {
                        if (mKey === key && mValue === value) {
                            params.isSelector = true
                        }
                    }
                    for (const label of linkLabels) {
                        if (label.key === key && label.value === value) {
                            params.disabled = true
                            params.linkMessage = label.linkMessage
                        }
                    }
                }
                if (!keyList.length) {
                    keyList.push({
                        key: '',
                        value: '',
                        isSelector: false,
                        disabled: false,
                        linkMessage: ''
                    })
                }
                return keyList
            },
            curLogLabelList () {
                const keyList = []
                const labels = this.curApplication.config.customLogLabel
                // 如果有缓存直接使用
                if (this.curApplication.config.webCache && this.curApplication.config.webCache.logLabelListCache) {
                    return this.curApplication.config.webCache.logLabelListCache
                }
                for (const [key, value] of Object.entries(labels)) {
                    keyList.push({
                        key: key,
                        value: value
                    })
                }
                if (!keyList.length) {
                    keyList.push({
                        key: '',
                        value: ''
                    })
                }
                return keyList
            },
            curRemarkList () {
                const list = []
                // 如果有缓存直接使用
                if (this.curApplication.config.webCache && this.curApplication.config.webCache.remarkListCache) {
                    return this.curApplication.config.webCache.remarkListCache
                }
                const annotations = this.curApplication.config.spec.template.metadata.annotations
                for (const [key, value] of Object.entries(annotations)) {
                    list.push({
                        key: key,
                        value: value
                    })
                }
                if (!list.length) {
                    list.push({
                        key: '',
                        value: ''
                    })
                }
                return list
            },
            curEnvList () {
                const list = []
                const envs = this.curContainer.env
                envs.forEach(env => {
                    for (const [key, value] of Object.entries(env)) {
                        list.push({
                            key: key,
                            value: value
                        })
                    }
                })
                return list
            }
        },
        watch: {
            'curContainer' () {
                if (this.curContainer.imagePullPolicy === 'Always') {
                    this.isAlwayCheckImage = true
                } else {
                    this.isAlwayCheckImage = false
                }

                if (!this.curContainer.ports.length) {
                    this.addPort()
                } else {
                    // 如果端口被关联，不能修改
                    this.curContainer.ports.forEach(item => {
                        const projectId = this.projectId
                        const version = this.curVersion
                        const portId = item.id
                        if (portId) {
                            this.$store.dispatch('k8sTemplate/checkPortIsLink', { projectId, version, portId }).then(res => {
                                item.isLink = ''
                            }, res => {
                                const message = res.message || res.data.data || ''
                                const msg = message.split(',')[0]
                                if (msg) {
                                    item.isLink = msg + '，不能修改协议！'
                                } else {
                                    item.isLink = ''
                                }
                            })
                        } else {
                            item.isLink = ''
                        }
                    })
                }

                if (!this.curContainer.volumeMounts.length) {
                    const volumes = this.curContainer.volumeMounts
                    volumes.push({
                        'name': '',
                        'mountPath': '',
                        'subPath': '',
                        'readOnly': false
                    })
                }
            },
            'curApplication' () {
                this.curContainerIndex = 0
                const container = this.curApplication.config.spec.template.spec.allContainers[0]
                this.setCurContainer(container, 0)
            },
            'curVersion' (val) {
                this.initVolumeConfigmaps()
                this.initVloumeSelectets()
            }
        },
        // async beforeRouteLeave (to, form, next) {
        //     // 修改模板集信息
        //     await this.$refs.commonHeader.saveTemplate()
        //     next(true)
        // },
        mounted () {
            this.isDataLoading = true
            this.$refs.commonHeader.initTemplate((data) => {
                this.initResource(data)
                this.isDataLoading = false
            })
            this.winHeight = window.innerHeight
            this.initImageList()
            this.initVolumeConfigmaps()
            this.initVloumeSelectets()
            this.initMetricList()

            const Validator = require('jsonschema').Validator
            this.appJsonValidator = new Validator()
        },
        methods: {
            /**
             * 切换挂载comfigmap回调
             * 如果是选中已经存在的，需要增加参数传给接口
             * is_exist: True/False
             * # 占用的命名空间
             * namespace: xxx
             * # 集群名称
             * cluster_name: xxx
             * # 集群ID
             * cluster_id: xxx
             */
            handlerVolumeConfigmap (volume, dataIndex, data) {
                if (data.cluster_id) {
                    volume.is_exist = true
                    volume.namespace = data.namespace
                    volume.cluster_name = data.cluster_name
                    volume.cluster_id = data.cluster_id
                } else {
                    volume.is_exist = false
                    delete volume.namespace
                    delete volume.cluster_name
                    delete volume.cluster_id
                }
            },

            /**
             * 切换挂载卷回调
             */
            handlerChangeVolumeType (volume) {
                volume.source = ''
            },

            /**
             * 选择变量键回调
             * @param  {number} index 下拉选择索引
             * @param  {object} data 下拉选择的数据对象
             * @param  {object} env 环境变量项
             */
            updateEnvItem (index, data, env) {
                env.keyCache = data.keyCache
                env.nameCache = data.nameCache
            },

            /**
             * 设置健康检查header 键值回调
             * @param  {array} list 键值列表 [{key: '', value: ''}]
             * @param  {object} data 键值对象 {key1: value1}
             */
            updateLivenessHeader (list, data) {
                const result = []
                list.forEach(item => {
                    const params = {
                        name: item.key,
                        value: item.value
                    }
                    result.push(params)
                })
                this.curContainer.livenessProbe.httpGet.httpHeaders = result
            },

            /**
             * 设置就绪检查header 键值回调
             * @param  {array} list 键值列表 [{key: '', value: ''}]
             * @param  {object} data 键值对象 {key1: value1}
             */
            updateReadinessHeader (list, data) {
                const result = []
                list.forEach(item => {
                    const params = {
                        name: item.key,
                        value: item.value
                    }
                    result.push(params)
                })
                this.curContainer.readinessProbe.httpGet.httpHeaders = result
            },

            /**
             * 网络策略改变时回调
             * @param  {number} item 选择的网络策略索引
             * @param  {object} data 选择的网络策略数据对象
             */
            changeDNSPolicy (item, data) {
                if (item === 0) {
                    this.curApplication.config.spec.template.spec.dnsPolicy = 'ClusterFirst'
                } else {
                    this.curApplication.config.spec.template.spec.dnsPolicy = 'ClusterFirstWithHostNet'
                }
            },

            /**
             * 获取对象所有key
             * @param  {object} obj 需要遍历的对象
             * @param  {array} result keys
             */
            getAppParamsKeys (obj, result) {
                for (const key in obj) {
                    // 忽略下面key
                    if (key === 'nodeSelector') continue
                    if (key === 'annotations') continue
                    if (key === 'volumes') continue
                    if (key === 'affinity') continue
                    if (key === 'labels') continue
                    if (key === 'selector') continue

                    if (Object.prototype.toString.call(obj) === '[object Array]') {
                        this.getAppParamsKeys(obj[key], result)
                    } else if (Object.prototype.toString.call(obj) === '[object Object]') {
                        if (!result.includes(key)) {
                            result.push(key)
                        }
                        this.getAppParamsKeys(obj[key], result)
                    }
                }
            },

            /**
             * 检查yaml是否包含非法字段（目前已暂停检查）
             * @param  {object} jsonObj yaml转成的json对象
             */
            checkJson (jsonObj) {
                const editor = this.editorConfig.editor
                const appParams = applicationParams.config
                const appParamKeys = [
                    'id',
                    'containerPort',
                    'hostPort',
                    'name',
                    'protocol',
                    'isLink',
                    'isDisabled',
                    'env',
                    'secrets',
                    'configmaps',
                    'logPathList',
                    'valueFrom',
                    'configMapRef',
                    'configMapKeyRef',
                    'secretRef',
                    'secretKeyRef',
                    'serviceAccountName',
                    'fieldRef',
                    'fieldPath',
                    'envFrom'
                ]
                const jsonParamKeys = []
                this.getAppParamsKeys(appParams, appParamKeys)
                this.getAppParamsKeys(jsonObj, jsonParamKeys)
                // application查看无效字段
                for (const key of jsonParamKeys) {
                    if (!appParamKeys.includes(key)) {
                        this.$bkMessage({
                            theme: 'error',
                            message: `${key}为无效字段！`
                        })
                        const match = editor.find(`${key}`)
                        if (match) {
                            editor.moveCursorTo(match.end.row, match.end.column)
                        }
                        return false
                    }
                }
                return true
            },

            /**
             * 导入yaml转成json后，需要进一步格式化，加工成前端需要的数据格式
             * @param  {object} jsonObj yaml转成的json对象
             * @return {object} jsonobj 返回格式化后的对象
             */
            formatJson (jsonObj) {
                // 标签
                const keyList = []
                const labels = jsonObj.spec.template.metadata.labels
                const selector = jsonObj.spec.selector.matchLabels
                const linkLabels = this.curApplicationLinkLabels

                for (const [key, value] of Object.entries(labels)) {
                    const params = {
                        key: key,
                        value: value,
                        isSelector: false,
                        disabled: false
                    }
                    keyList.push(params)
                }

                for (const params of keyList) {
                    const key = params.key
                    const value = params.value

                    for (const [mKey, mValue] of Object.entries(selector)) {
                        if (mKey === key && mValue === value) {
                            params.isSelector = true
                        }
                    }
                    for (const label of linkLabels) {
                        if (label.key === key && label.value === value) {
                            params.disabled = true
                        }
                    }
                }
                if (!keyList.length) {
                    keyList.push({
                        key: '',
                        value: '',
                        isSelector: false,
                        disabled: false
                    })
                }
                jsonObj.webCache.labelListCache = keyList

                // 日志标签
                const logLabels = jsonObj.customLogLabel
                const logLabelList = []
                for (const [key, value] of Object.entries(logLabels)) {
                    logLabelList.push({
                        key: key,
                        value: value
                    })
                }
                if (!logLabelList.length) {
                    logLabelList.push({
                        key: '',
                        value: ''
                    })
                }
                jsonObj.webCache.logLabelListCache = logLabelList

                // 备注
                const remarkList = []
                const annotations = jsonObj.spec.template.metadata.annotations
                for (const [key, value] of Object.entries(annotations)) {
                    remarkList.push({
                        key: key,
                        value: value
                    })
                }
                if (!remarkList.length) {
                    remarkList.push({
                        key: '',
                        value: ''
                    })
                }

                jsonObj.webCache.remarkListCache = remarkList

                // 亲和性约束
                const affinity = jsonObj.spec.template.spec.affinity
                if (affinity && JSON.stringify(affinity) !== '{}') {
                    const yamlStr = yamljs.dump(jsonObj.spec.template.spec.affinity)
                    jsonObj.webCache.affinityYaml = yamlStr
                    jsonObj.webCache.isUserConstraint = true
                } else {
                    jsonObj.spec.template.spec.affinity = {}
                    jsonObj.webCache.affinityYaml = ''
                    jsonObj.webCache.isUserConstraint = false
                }

                // 调度约束
                const nodeSelector = jsonObj.spec.template.spec.nodeSelector
                const nodeSelectorList = jsonObj.webCache.nodeSelectorList = []
                for (const [key, value] of Object.entries(nodeSelector)) {
                    nodeSelectorList.push({
                        key: key,
                        value: value
                    })
                }
                if (!nodeSelectorList.length) {
                    nodeSelectorList.push({
                        key: '',
                        value: ''
                    })
                }

                // Metric信息 (合并原数据)
                jsonObj.webCache.isMetric = this.curApplicationCache.webCache.isMetric
                jsonObj.webCache.metricIdList = this.curApplicationCache.webCache.metricIdList

                // 挂载卷
                const volumes = jsonObj.spec.template.spec.volumes
                let volumesCache = jsonObj.webCache.volumes

                if (volumes && volumes.length) {
                    volumesCache = []
                    volumes.forEach(volume => {
                        if (volume.hasOwnProperty('emptyDir')) {
                            if (volume.emptyDir.medium) {
                                volumesCache.push({
                                    type: 'emptyDir(Memory)',
                                    name: volume.name,
                                    source: volume.emptyDir.sizeLimit.replace('Gi', '')
                                })
                            } else {
                                volumesCache.push({
                                    type: 'emptyDir',
                                    name: volume.name,
                                    source: ''
                                })
                            }
                        } else if (volume.hasOwnProperty('persistentVolumeClaim')) {
                            volumesCache.push({
                                type: 'persistentVolumeClaim',
                                name: volume.name,
                                source: volume.persistentVolumeClaim.claimName
                            })
                        } else if (volume.hasOwnProperty('hostPath')) {
                            const volumeItem = {
                                type: 'hostPath',
                                name: volume.name,
                                source: volume.hostPath.path
                            }
                            if (volume.hostPath.type) {
                                volumeItem.hostType = volume.hostPath.type
                            }
                            volumesCache.push(volumeItem)
                        } else if (volume.hasOwnProperty('configMap')) {
                            volumesCache.push({
                                type: 'configMap',
                                name: volume.name,
                                source: volume.configMap.name
                            })
                        } else if (volume.hasOwnProperty('secret')) {
                            volumesCache.push({
                                type: 'secret',
                                name: volume.name,
                                source: volume.secret.secretName
                            })
                        }
                    })
                }

                jsonObj.webCache.volumes = JSON.parse(JSON.stringify(volumesCache))
                // container env
                jsonObj.spec.template.spec.allContainers = []
                const containers = jsonObj.spec.template.spec.containers
                const initContainers = jsonObj.spec.template.spec.initContainers

                containers.forEach((container, index) => {
                    this.formatContainerJosn(container, index)
                    container.webCache.containerType = 'container'
                    jsonObj.spec.template.spec.allContainers.push(container)
                })
                initContainers.forEach((container, index) => {
                    this.formatContainerJosn(container, index)
                    container.webCache.containerType = 'initContainer'
                    jsonObj.spec.template.spec.allContainers.push(container)
                })
                return jsonObj
            },

            /**
             * 对导入container数据进行格式化，加工成前端需要的数据格式
             * @param  {object} container container
             * @param  {number} index container索引
             */
            formatContainerJosn (container, index) {
                if (!container.webCache) {
                    container.webCache = {}
                }

                // 兼容原数据webcache
                container.webCache.imageName = container.imageName
                delete container.imageName
                container.webCache.env_list = []

                this.curApplicationCache.spec.template.spec.allContainers.forEach(containerCache => {
                    if (containerCache.name === container.name) {
                        // 描述
                        container.webCache.desc = containerCache.webCache.desc
                        // 合并非标准日志采集
                        container.webCache.logListCache = containerCache.webCache.logListCache
                    }
                })

                // 环境变量
                if ((container.env && container.env.length) || (container.envFrom && container.envFrom.length)) {
                    const envs = container.env || []
                    const envFroms = container.envFrom || []
                    envs.forEach(item => {
                        // valuefrom
                        if (item.valueFrom && item.valueFrom.fieldRef) {
                            container.webCache.env_list.push({
                                type: 'valueFrom',
                                key: item.name,
                                value: item.valueFrom.fieldRef.fieldPath
                            })
                            return false
                        }

                        // configMap单键
                        if (item.valueFrom && item.valueFrom.configMapKeyRef) {
                            container.webCache.env_list.push({
                                type: 'configmapKey',
                                key: item.name,
                                nameCache: item.valueFrom.configMapKeyRef.name,
                                keyCache: item.valueFrom.configMapKeyRef.key,
                                value: `${item.valueFrom.configMapKeyRef.name}.${item.valueFrom.configMapKeyRef.key}`
                            })
                            return false
                        }

                        // secret单键
                        if (item.valueFrom && item.valueFrom.secretKeyRef) {
                            container.webCache.env_list.push({
                                type: 'secretKey',
                                key: item.name,
                                nameCache: item.valueFrom.secretKeyRef.name,
                                keyCache: item.valueFrom.secretKeyRef.key,
                                value: `${item.valueFrom.secretKeyRef.name}.${item.valueFrom.secretKeyRef.key}`
                            })
                            return false
                        }

                        // 自定义
                        container.webCache.env_list.push({
                            type: 'custom',
                            key: item.name,
                            value: item.value
                        })
                    })

                    envFroms.forEach(item => {
                        // configMap文件
                        if (item.configMapRef) {
                            container.webCache.env_list.push({
                                type: 'configmapFile',
                                key: '',
                                value: item.configMapRef.name
                            })
                            return false
                        }

                        // secret文件
                        if (item.secretRef) {
                            container.webCache.env_list.push({
                                type: 'secretFile',
                                key: '',
                                value: item.secretRef.name
                            })
                            return false
                        }
                    })
                }

                if (!container.webCache.env_list.length) {
                    container.webCache.env_list.push({
                        type: 'custom',
                        key: '',
                        value: ''
                    })
                }

                // volumeMounts
                if (container.volumeMounts.length) {
                    container.volumeMounts.forEach(volume => {
                        volume.readOnly = false
                    })
                }

                // 命令参数
                if (Array.isArray(container.args)) {
                    container.args = container.args.join(' ')
                }

                // 端口
                if (container.ports) {
                    const ports = container.ports
                    ports.forEach((item, index) => {
                        item.isLink = false
                        if (!item.id) {
                            item.id = +new Date() + index
                        }
                    })
                }

                // 资源限制
                const resources = container.resources
                if (resources.limits.cpu && resources.limits.cpu.replace) {
                    resources.limits.cpu = Number(resources.limits.cpu.replace('m', ''))
                }
                if (resources.limits.memory && resources.limits.memory.replace) {
                    resources.limits.memory = Number(resources.limits.memory.replace('Mi', ''))
                }
                if (resources.requests.cpu && resources.requests.cpu.replace) {
                    resources.requests.cpu = Number(resources.requests.cpu.replace('m', ''))
                }
                if (resources.requests.memory && resources.requests.memory.replace) {
                    resources.requests.memory = Number(resources.requests.memory.replace('Mi', ''))
                }
            },

            /**
             * 隐藏yaml导入面板
             */
            hideApplicationJson () {
                this.toJsonDialogConf.isShow = false
            },

            /**
             * 导入yaml（先检查yaml的合法，再转成json和原数据对象合并）
             */
            saveApplicationJson () {
                const editor = this.editorConfig.editor
                const yaml = editor.getValue()
                const cParams = containerParams
                let appObj = null

                if (!yaml) {
                    this.$bkMessage({
                        theme: 'error',
                        message: '请输入YAML!'
                    })
                    return false
                }

                try {
                    appObj = yamljs.load(yaml)
                } catch (err) {
                    this.$bkMessage({
                        theme: 'error',
                        message: '请输入合法的YAML!'
                    })
                    return false
                }

                // 如果编辑器有语法报错，定位到错误行
                const annot = editor.getSession().getAnnotations()
                if (annot && annot.length) {
                    editor.gotoLine(annot[0].row, annot[0].column, true)
                    return false
                }
                //  Container类型
                if (appObj.spec.template.spec.containers) {
                    const containers = appObj.spec.template.spec.containers
                    const containerCopys = []
                    containers.forEach(container => {
                        const copy = _.merge({}, cParams, container)
                        containerCopys.push(copy)
                    })
                    containers.splice(0, containers.length, ...containerCopys)
                }
                // InitContainer类型
                if (appObj.spec.template.spec.initContainers) {
                    const initContainers = appObj.spec.template.spec.initContainers
                    const containerCopys = []
                    initContainers.forEach(container => {
                        const copy = _.merge({}, cParams, container)
                        containerCopys.push(copy)
                    })
                    initContainers.splice(0, initContainers.length, ...containerCopys)
                }

                const newConfObj = _.merge({}, applicationParams.config, appObj)
                const jsonFromat = this.formatJson(newConfObj)
                this.curApplication.config = jsonFromat
                this.curApplication.desc = this.curDesc
                this.toJsonDialogConf.isShow = false
                if (this.curApplication.config.spec.template.spec.allContainers.length) {
                    const container = this.curApplication.config.spec.template.spec.allContainers[0]
                    this.setCurContainer(container, 0)
                }
            },

            /**
             * 显示导入yaml（json）面板
             * 将原数据对象clone，再进行各种格式化去除前端依赖的部分字段
             */
            showJsonPanel () {
                this.toJsonDialogConf.title = this.curApplication.config.metadata.name + '.yaml'
                const appConfig = JSON.parse(JSON.stringify(this.curApplication.config))
                const webCache = appConfig.webCache

                this.curDesc = this.curApplication.desc
                // 在处理yaml导入时，保存一份原数据，方便对导入的数据进行合并处理
                this.curApplicationCache = JSON.parse(JSON.stringify(this.curApplication.config))

                // 标签
                if (webCache && webCache.labelListCache) {
                    const labelKeyList = this.tranListToObject(webCache.labelListCache)
                    appConfig.spec.template.metadata.labels = labelKeyList
                    appConfig.spec.selector.matchLabels = {}
                    webCache.labelListCache.forEach(item => {
                        if (item.isSelector && item.key && item.value) {
                            appConfig.spec.selector.matchLabels[item.key] = item.value
                        }
                    })
                }

                // 日志标签
                if (webCache && webCache.logLabelListCache) {
                    const labelKeyList = this.tranListToObject(webCache.logLabelListCache)
                    appConfig.customLogLabel = labelKeyList
                }

                // 备注
                if (webCache && webCache.remarkListCache) {
                    const remarkKeyList = this.tranListToObject(webCache.remarkListCache)
                    appConfig.spec.template.metadata.annotations = remarkKeyList
                }

                // 调度约束
                if (webCache.nodeSelectorList) {
                    const nodeSelector = appConfig.spec.template.spec.nodeSelector = {}
                    const nodeSelectorList = webCache.nodeSelectorList
                    nodeSelectorList.forEach(item => {
                        nodeSelector[item.key] = item.value
                    })
                }

                // 亲和性约束
                if (webCache.isUserConstraint) {
                    try {
                        const yamlCode = webCache.affinityYamlCache
                        webCache.affinityYaml = yamlCode
                        const json = yamljs.load(yamlCode)
                        if (json) {
                            appConfig.spec.template.spec.affinity = json
                        } else {
                            appConfig.spec.template.spec.affinity = {}
                        }
                    } catch (err) {
                        // error
                    }
                } else {
                    appConfig.spec.template.spec.affinity = {}
                }

                if (webCache && webCache.volumes.length) {
                    const cacheColumes = webCache.volumes
                    const volumes = []
                    cacheColumes.forEach(volume => {
                        if ((volume.name && volume.source) || (volume.name && volume.type === 'emptyDir')) {
                            switch (volume.type) {
                                case 'emptyDir':
                                    volumes.push({
                                        name: volume.name,
                                        emptyDir: {}
                                    })
                                    break

                                case 'persistentVolumeClaim':
                                    volumes.push({
                                        name: volume.name,
                                        persistentVolumeClaim: {
                                            claimName: volume.source
                                        }
                                    })
                                    break

                                case 'hostPath':
                                    const item = {
                                        name: volume.name,
                                        hostPath: {
                                            path: volume.source
                                        }
                                    }
                                    if (volume.hostType) {
                                        item.hostPath.type = volume.hostType
                                    }
                                    volumes.push(item)
                                    break

                                case 'configMap':
                                    // 针对已经存的configmap处理
                                    let volumeSource = volume.source
                                    if (volume.is_exist) {
                                        volumeSource = volume.source.split(':')[0]
                                    }
                                    volumes.push({
                                        name: volume.name,
                                        configMap: {
                                            name: volumeSource
                                        }
                                    })
                                    break

                                case 'secret':
                                    volumes.push({
                                        name: volume.name,
                                        secret: {
                                            secretName: volume.source
                                        }
                                    })
                                    break
                                case 'emptyDir(Memory)':
                                    volumes.push({
                                        name: volume.name,
                                        emptyDir: {
                                            medium: 'Memory',
                                            sizeLimit: `${volume.source}Gi`
                                        }
                                    })
                                    break
                            }
                        }
                    })
                    appConfig.spec.template.spec.volumes = volumes
                }
                delete appConfig.webCache

                // container
                appConfig.spec.template.spec.containers = []
                appConfig.spec.template.spec.initContainers = []

                appConfig.spec.template.spec.allContainers.forEach(container => {
                    container.imageName = container.webCache.imageName
                    this.yamlContainerWebcache.push(JSON.parse(JSON.stringify(container.webCache)))
                    container.env = []
                    container.envFrom = []
                    // 环境变量
                    if (container.webCache && container.webCache.env_list) {
                        const envs = container.webCache.env_list
                        envs.forEach(env => {
                            // valuefrom
                            if (env.type === 'valueFrom') {
                                container.env.push({
                                    name: env.key,
                                    valueFrom: {
                                        fieldRef: {
                                            fieldPath: env.value
                                        }
                                    }
                                })
                                return false
                            }

                            // configMap单键
                            if (env.type === 'configmapKey') {
                                container.env.push({
                                    name: env.key,
                                    valueFrom: {
                                        configMapKeyRef: {
                                            name: env.nameCache,
                                            key: env.keyCache
                                        }
                                    }
                                })
                                return false
                            }

                            // configMap文件
                            if (env.type === 'configmapFile') {
                                container.envFrom.push({
                                    configMapRef: {
                                        name: env.value
                                    }
                                })
                                return false
                            }

                            // secret单键
                            if (env.type === 'secretKey') {
                                container.env.push({
                                    name: env.key,
                                    valueFrom: {
                                        secretKeyRef: {
                                            name: env.nameCache,
                                            key: env.keyCache
                                        }
                                    }
                                })
                                return false
                            }

                            // secret文件
                            if (env.type === 'secretFile') {
                                container.envFrom.push({
                                    secretRef: {
                                        name: env.value
                                    }
                                })
                                return false
                            }

                            // 自定义
                            if (env.key) {
                                container.env.push({
                                    name: env.key,
                                    value: env.value
                                })
                            }
                        })
                    }

                    if (!container.webCache.env_list.length) {
                        container.webCache.env_list.push({
                            type: 'custom',
                            key: '',
                            value: ''
                        })
                    }
                    if (container.webCache.containerType === 'initContainer') {
                        appConfig.spec.template.spec.initContainers.push(container)
                    } else {
                        appConfig.spec.template.spec.containers.push(container)
                    }
                    delete container.webCache
                })
                delete appConfig.spec.template.spec.allContainers

                const yamlStr = yamljs.dump(appConfig)
                this.editorConfig.value = yamlStr
                this.toJsonDialogConf.isShow = true
            },

            /**
             * 导入yaml ace编辑器初始化成功后回调
             * @param  {object} editor 编辑器对象
             */
            editorInitAfter (editor) {
                this.editorConfig.editor = editor
                this.editorConfig.editor.setStyle('biz-app-container-tojson-ace')
            },

            /**
             * 亲和性约束 ace编辑器初始化成功后回调
             * @param  {object} editor 编辑器对象
             */
            yamlEditorInitAfter (editor) {
                this.yamlEditorConfig.editor = editor
                if (this.curApplication.config.webCache.affinityYaml) {
                    editor.setValue(this.curApplication.config.webCache.affinityYaml)
                }
            },

            /**
             * yaml编辑器输入时回调
             * @param  {string} val 值
             */
            yamlEditorInput (val) {
                this.curApplication.config.webCache.affinityYamlCache = val
            },

            /**
             * yaml编辑器失去焦点时回调
             * @param  {string} val 值
             */
            yamlEditorBlur (val) {
                this.curApplication.config.webCache.affinityYaml = val
            },

            /**
             * 关闭导入yaml面板时回调，清空数据
             */
            closeToJson () {
                this.toJsonDialogConf.isShow = false
                this.toJsonDialogConf.title = ''
                this.editorConfig.value = ''
                this.copyContent = ''
            },

            /**
             * 切换版本时回调，将相应的资源重新加载
             * @param  {object} data 相应版本的模板集数据
             */
            initResource (data) {
                if (data.deployments && data.deployments.length) {
                    this.setCurApplication(data.deployments[0], 0)
                } else if (data.deployment && data.deployment.length) {
                    this.setCurApplication(data.deployment[0], 0)
                }
            },

            /**
             * 切换到其它资源时回调，调用整体head自动对当前数据进行尝试时保存
             */
            async tabResource (type, target) {
                this.isTabChanging = true
                await this.$refs.commonHeader.autoSaveResource(type)
                this.$refs.commonTab.goResource(target)
            },

            /**
             * 异常处理
             * @param  {object} exceptionCode 异常数据
             */
            exceptionHandler (exceptionCode) {
                this.isDataLoading = false
                this.exceptionCode = exceptionCode
            },

            /**
             * 健康检查，选择端口回调
             * @param  {number} selected 端口索引
             * @param  {object} data 端口数据对象
             */
            livenessProbePortNameSelect (selected, data) {
                const healthParams = this.curContainer.livenessProbe
                const type = this.curContainer.webCache.livenessProbeType
                if (type === 'HTTP') {
                    healthParams.httpGet.port = selected
                } else if (type === 'TCP') {
                    healthParams.tcpSocket.port = selected
                }
            },

            /**
             * 就绪检查，选择端口回调
             * @param  {number} selected 端口索引
             * @param  {object} data 端口数据对象
             */
            readinessProbePortNameSelect (selected, data) {
                const healthParams = this.curContainer.readinessProbe
                const type = this.curContainer.webCache.readinessProbeType
                if (type === 'HTTP') {
                    healthParams.httpGet.port = selected
                } else if (type === 'TCP') {
                    healthParams.tcpSocket.port = selected
                }
            },

            /**
             * 镜像更新类型回调
             */
            changeImagePullPolicy () {
                // 判断改变前的状态
                if (!this.isAlwayCheckImage) {
                    this.curContainer.imagePullPolicy = 'Always'
                } else {
                    this.curContainer.imagePullPolicy = 'IfNotPresent'
                }
            },

            /**
             * 添加本地应用项
             */
            addLocalApplication () {
                const application = JSON.parse(JSON.stringify(applicationParams))
                const index = this.deployments.length
                const now = +new Date()
                const applicationName = 'deployment-' + (index + 1)
                const containerName = 'container-1'

                application.id = 'local_' + now
                application.isEdited = true

                application.config.metadata.name = applicationName
                application.config.spec.template.spec.allContainers[0].name = containerName

                this.deployments.push(application)
                this.setCurApplication(application, index)
            },

            /**
             * 设置当前应用项
             * @param {object} application application
             * @param {number} index  application索引
             */
            setCurApplication (application, index) {
                this.curApplication = application
                this.curApplicationId = application.id
                this.initLinkLabels()

                clearInterval(this.compareTimer)
                clearTimeout(this.setTimer)

                // 开启对当前数据项每1秒的检查
                this.setTimer = setTimeout(() => {
                    if (!this.curApplication.cache) {
                        this.curApplication.cache = JSON.parse(JSON.stringify(application))
                    }
                    this.watchChange()
                }, 500)
            },

            /**
             * 在数据对比前，删除无用的数据
             * @param  {object} target 目标
             */
            deletePropertyBeforeDiff (target) {
                // 删除无用属性
                delete target.isEdited
                delete target.cache
                delete target.id
                delete target.config.spec.template.spec.containers
                delete target.config.spec.template.spec.initContainers

                target.config.spec.template.spec.allContainers.forEach(item => {
                    if (item.ports.length === 1) {
                        const port = item.ports[0]
                        if (port.containerPort === '' && port.name === '') {
                            item.ports = []
                        }
                    }

                    item.ports.forEach(port => {
                        delete port.isLink
                    })

                    if (item.volumeMounts.length === 1) {
                        const volumn = item.volumeMounts[0]
                        if (volumn.name === '' && volumn.mountPath === '' && volumn.readOnly === false) {
                            item.volumeMounts = []
                        }
                    }
                })
            },

            /**
             * 检查表单数据是否有更新
             * 主要是将当前数据与原来数据（最核心的数据）的json stringify后对比
             * 目前是用一个定时器实现轮询，也可以用es6的Proxy在原对象作一层拦截监听来实现
             */
            watchChange () {
                this.compareTimer = setInterval(() => {
                    const appCopy = JSON.parse(JSON.stringify(this.curApplication))
                    const cacheCopy = JSON.parse(JSON.stringify(this.curApplication.cache))
                    this.deletePropertyBeforeDiff(appCopy)
                    this.deletePropertyBeforeDiff(cacheCopy)

                    const appStr = JSON.stringify(appCopy)
                    const cacheStr = JSON.stringify(cacheCopy)

                    if (String(this.curApplication.id).indexOf('local_') > -1) {
                        this.curApplication.isEdited = true
                    } else if (appStr !== cacheStr) {
                        this.curApplication.isEdited = true
                    } else {
                        this.curApplication.isEdited = false
                    }
                }, 1000)
            },

            /**
             * 将objet转成数组形式[{key: '', value: ''}]
             * @param  {object} headers header
             */
            getProbeHeaderList (headers) {
                const list = []
                if (headers.forEach) {
                    headers.forEach(item => {
                        list.push({
                            key: item.name || '',
                            value: item.value || ''
                        })
                    })
                }
                if (!list.length) {
                    list.push({
                        key: '',
                        value: ''
                    })
                }
                return list
            },

            /**
             * 切换container
             * @param {object} container container
             */
            setCurContainer (container, index) {
                // 切换container
                this.curContainer = container
                this.curContainerIndex = index

                this.livenessProbeHeaders = this.getProbeHeaderList(this.curContainer.livenessProbe.httpGet.httpHeaders)
                this.readinessProbeHeaders = this.getProbeHeaderList(this.curContainer.readinessProbe.httpGet.httpHeaders)
                
                const volumesNames = this.curApplication.config.webCache.volumes.map(item => item.name)
                const tmp = this.curContainer.volumeMounts.filter(item => {
                    return volumesNames.includes(item.name)
                })
                if (!tmp.length) {
                    tmp.push({
                        'name': '',
                        'mountPath': '',
                        'subPath': '',
                        'readOnly': false
                    })
                }
                this.curContainer.volumeMounts = tmp
            },

            /**
             * 删除container
             * @param  {number} index 索引
             */
            removeContainer (index) {
                const containers = this.curApplication.config.spec.template.spec.allContainers
                containers.splice(index, 1)
                if (this.curContainerIndex === index) {
                    this.curContainerIndex = 0
                } else if (this.curContainerIndex > index) {
                    this.curContainerIndex = this.curContainerIndex - 1
                }
                this.curContainer = containers[this.curContainerIndex]
            },

            /**
             * 添加本地container
             */
            addLocalContainer () {
                const container = JSON.parse(JSON.stringify(containerParams))
                const containers = this.curApplication.config.spec.template.spec.allContainers
                const index = containers.length
                container.name = 'container-' + (index + 1)
                containers.push(container)
                this.setCurContainer(container, index)
                this.$refs.containerTooltip.visible = false
            },

            /**
             * 删除本地应用
             * @param  {object} application application
             * @param  {number} index 索引
             */
            removeLocalApplication (application, index) {
                // 是否删除当前项
                if (this.curApplication.id === application.id) {
                    if (index === 0 && this.deployments[index + 1]) {
                        this.setCurApplication(this.deployments[index + 1])
                    } else if (this.deployments[0]) {
                        this.setCurApplication(this.deployments[0])
                    }
                }
                this.deployments.splice(index, 1)
            },

            /**
             * 删除应用(已经存在数据库)
             * @param  {object} application application
             * @param  {number} index 索引
             */
            removeApplication (application, index) {
                const self = this
                const projectId = this.projectId
                const version = this.curVersion
                const id = application.id
                this.$bkInfo({
                    title: '确认',
                    content: this.$createElement('p', { style: { 'text-align': 'center' } }, `删除Deployment：${application.config.metadata.name || '未命名'}`),
                    confirmFn () {
                        if (id.indexOf && id.indexOf('local_') > -1) {
                            self.removeLocalApplication(application, index)
                        } else {
                            self.$store.dispatch('k8sTemplate/removeDeployment', { id, version, projectId }).then(res => {
                                const data = res.data
                                self.removeLocalApplication(application, index)

                                if (data.version) {
                                    self.$store.commit('k8sTemplate/updateCurVersion', data.version)
                                    self.$store.commit('k8sTemplate/updateBindVersion', true)
                                }
                            }, res => {
                                const message = res.message
                                self.$bkMessage({
                                    theme: 'error',
                                    message: message
                                })
                            })
                        }
                    }
                })
            },

            togglePartA () {
                this.isPartAShow = !this.isPartAShow
            },

            togglePartB () {
                this.isPartBShow = !this.isPartBShow
            },

            togglePartC () {
                this.isPartCShow = !this.isPartCShow
            },

            toggleMore () {
                this.isMorePanelShow = !this.isMorePanelShow
                this.isPodPanelShow = false
            },

            togglePod () {
                this.isPodPanelShow = !this.isPodPanelShow
                this.isMorePanelShow = false
            },

            saveDeploymentSuccess (params) {
                this.deployments.forEach(item => {
                    if (params.responseData.id === item.id || params.preId === item.id) {
                        item.cache = JSON.parse(JSON.stringify(item))
                    }
                })
                if (params.responseData.id === this.curApplication.id || params.preId === this.curApplication.config.id) {
                    this.updateLocalData(params.resource)
                }
            },

            updateLocalData (data) {
                if (data.id) {
                    this.curApplication.config.id = data.id
                    this.curApplicationId = data.id
                }
                if (data.version) {
                    this.$store.commit('k8sTemplate/updateCurVersion', data.version)
                }

                this.$store.commit('k8sTemplate/updateDeployments', this.deployments)
                setTimeout(() => {
                    this.deployments.forEach(item => {
                        if (item.id === data.id) {
                            this.setCurApplication(item)
                        }
                    })
                }, 500)
            },

            removeVolumn (item, index) {
                const volumes = this.curApplication.config.webCache.volumes
                volumes.splice(index, 1)

                // 同步删除挂载卷
                this.curApplication.config.spec.template.spec.allContainers.forEach(container => {
                    container.volumeMounts = container.volumeMounts.filter((volumeMount, index) => {
                        return volumeMount.name !== item.name
                    })
                    if (!container.volumeMounts.length) {
                        container.volumeMounts.push({
                            'name': '',
                            'mountPath': '',
                            'subPath': '',
                            'readOnly': false
                        })
                    }
                })
            },

            addVolumn () {
                const volumes = this.curApplication.config.webCache.volumes
                volumes.push({
                    type: 'emptyDir',
                    name: '',
                    source: ''
                })
            },

            removeMountVolumn (item, index) {
                const volumes = this.curContainer.volumeMounts
                volumes.splice(index, 1)
            },

            addMountVolumn () {
                const volumes = this.curContainer.volumeMounts
                volumes.push({
                    'name': '',
                    'mountPath': '',
                    'subPath': '',
                    'readOnly': false
                })
            },

            removeEnv (item, index) {
                const envList = this.curContainer.webCache.env_list
                envList.splice(index, 1)
            },

            addEnv () {
                const envList = this.curContainer.webCache.env_list
                envList.push({
                    'type': 'custom',
                    'key': '',
                    'value': ''
                })
            },

            pasteKey (item, event) {
                const cache = item.key
                this.paste(event)
                item.key = cache
                setTimeout(() => {
                    item.key = cache
                }, 0)
            },

            paste (event) {
                const clipboard = event.clipboardData
                const text = clipboard.getData('Text')
                const envList = this.curContainer.webCache.env_list
                if (text) {
                    const items = text.split('\n')
                    items.forEach(item => {
                        const arr = item.split('=')
                        envList.push({
                            type: 'custom',
                            key: arr[0],
                            value: arr[1]
                        })
                    })
                }
                setTimeout(() => {
                    this.formatEnvListData()
                }, 10)

                return false
            },

            formatEnvListData () {
                // 去掉空值
                if (this.curContainer.webCache.env_list.length) {
                    const results = []
                    const keyObj = {}
                    const length = this.curContainer.webCache.env_list.length
                    this.curContainer.webCache.env_list.forEach((item, i) => {
                        if (item.key || item.value) {
                            if (!keyObj[item.key]) {
                                results.push(item)
                                keyObj[item.key] = true
                            }
                        }
                    })
                    const patchLength = results.length - length
                    if (patchLength > 0) {
                        for (let i = 0; i < patchLength; i++) {
                            results.push({
                                type: 'custom',
                                key: '',
                                value: ''
                            })
                        }
                    }
                    this.curContainer.webCache.env_list.splice(0, this.curContainer.webCache.env_list.length, ...results)
                }
            },

            getVolumeNameList (type) {
                if (type === 'configmap') {
                    return this.configmapList
                } else if (type === 'secret') {
                    return this.secretList
                }
            },

            getVolumeSourceList (type, name) {
                if (!name) return []
                if (type === 'configmap') {
                    const list = this.configmapList
                    for (const item of list) {
                        if (item.name === name) {
                            return item.childList
                        }
                    }
                    return []
                } else if (type === 'secret') {
                    const list = this.secretList
                    for (const item of list) {
                        if (item.name === name) {
                            return item.childList
                        }
                    }
                    return []
                }
                return []
            },

            selectOperate (data) {
                const operate = data.operate
                if (operate === 'UNIQUE') {
                    data.type = 0
                    data.arg_value = ''
                }
            },

            updateNodeSelectorList (list, data) {
                if (!this.curApplication.config.webCache) {
                    this.curApplication.config.webCache = {}
                }
                this.curApplication.config.webCache.nodeSelectorList = list
            },

            updateApplicationRemark (list, data) {
                if (!this.curApplication.config.webCache) {
                    this.curApplication.config.webCache = {}
                }
                this.curApplication.config.webCache.remarkListCache = list
            },

            updateApplicationLabel (list, data) {
                if (!this.curApplication.config.webCache) {
                    this.curApplication.config.webCache = {}
                }

                this.curApplication.config.webCache.labelListCache = list
            },

            updateApplicationLogLabel (list, data) {
                if (!this.curApplication.config.webCache) {
                    this.curApplication.config.webCache = {}
                }
                this.curApplication.config.webCache.logLabelListCache = list
            },

            initImageList () {
                this.isLoadingImageList = true
                const projectId = this.projectId
                this.$store.dispatch('k8sTemplate/getImageList', { projectId }).then(res => {
                    const data = res.data
                    data.forEach(item => {
                        item._id = item.value
                        item._name = item.name
                    })
                    this.imageList.splice(0, this.imageList.length, ...data)
                    this.$store.commit('k8sTemplate/updateImageList', this.imageList)
                    this.isLoadingImageList = false
                }, res => {
                    const message = res.message
                    this.$bkMessage({
                        theme: 'error',
                        message: message,
                        delay: 10000
                    })
                    this.isLoadingImageList = false
                })
            },

            changeImage (value, data, isInitTrigger) {
                const projectId = this.projectId
                const imageId = data.value
                const isPub = data.is_pub
                this.curImageData = data
                // 如果不是输入变量
                if (isPub !== undefined) {
                    this.$store.dispatch('k8sTemplate/getImageVertionList', { projectId, imageId, isPub }).then(res => {
                        const data = res.data
                        data.forEach(item => {
                            item._id = item.text
                            item._name = item.text
                        })

                        this.imageVersionList.splice(0, this.imageVersionList.length, ...data)

                        // 非首次关联触发，默认选择第一项或清空
                        if (isInitTrigger) return

                        if (this.imageVersionList.length) {
                            const imageInfo = this.imageVersionList[0]

                            this.curContainer.image = imageInfo.value
                            this.curContainer.imageVersion = imageInfo.text
                        } else {
                            this.curContainer.image = ''
                        }
                    }, res => {
                        const message = res.message
                        this.$bkMessage({
                            theme: 'error',
                            message: message
                        })
                    })
                } else if (!isInitTrigger) {
                    this.imageVersionList = []
                    this.curContainer.image = ''
                    this.curContainer.imageVersion = ''
                }
            },

            setImageVersion (value, data) {
                // 镜像和版本都是通过下拉选择
                const projectCode = this.projectCode
                // curImageData不是空对象
                if (JSON.stringify(this.curImageData) !== '{}') {
                    if (data.text && data.value) {
                        this.curContainer.imageVersion = data.text
                        this.curContainer.image = data.value
                    } else if (this.curImageData.is_pub !== undefined) {
                        // 镜像是下拉，版本是变量
                        // image = imageBase + imageName + ':' + imageVersion
                        const imageName = this.curContainer.webCache.imageName
                        this.curContainer.imageVersion = value
                        this.curContainer.image = `${DEVOPS_ARTIFACTORY_HOST}/${imageName}:${value}`
                    } else {
                        // 镜像和版本是变量
                        // image = imageBase +  'paas/' + projectCode + '/' + imageName + ':' + imageVersion
                        const imageName = this.curContainer.webCache.imageName
                        this.curContainer.imageVersion = value
                        this.curContainer.image = `${DEVOPS_ARTIFACTORY_HOST}/${projectCode}/${imageName}:${value}`
                    }
                }
            },

            addPort () {
                const id = +new Date()
                const params = {
                    id: id,
                    containerPort: '',
                    name: '',
                    isLink: false
                }

                this.curContainer.ports.push(params)
            },

            addLog () {
                this.curContainer.webCache.logListCache.push({
                    value: ''
                })
            },

            removeLog (log, index) {
                this.curContainer.webCache.logListCache.splice(index, 1)
            },

            changeProtocol (item) {
                const projectId = this.projectId
                const version = this.curVersion
                const portId = item.id
                this.$store.dispatch('k8sTemplate/checkPortIsLink', { projectId, version, portId }).then(res => {
                }, res => {
                    const message = res.message || res.data.data
                    const msg = message.split(',')[0]
                    this.$bkMessage({
                        theme: 'error',
                        message: msg + '，不能修改协议！'
                    })
                })
            },

            removePort (item, index) {
                const projectId = this.projectId
                const version = this.curVersion
                const portId = item.id
                this.$store.dispatch('k8sTemplate/checkPortIsLink', { projectId, version, portId }).then(res => {
                    this.curContainer.ports.splice(index, 1)
                }, res => {
                    const message = res.message || res.data.data
                    this.$bkMessage({
                        theme: 'error',
                        message: message
                    })
                })
            },

            selectVolumeType (volumeItem) {
                // volumeItem.name = ''
                // volumeItem.mountPath = ''
                // const data = Object.assign([], this.curContainer.volumeMounts)
                // this.curContainer.volumeMounts.splice(0, this.curContainer.volumeMounts.length, ...data)
            },

            setVolumeName (volumeItem) {
                volumeItem.volume.hostPath = ''
            },

            initVolumeConfigmaps () {
                const version = this.curVersion
                if (!version) {
                    return false
                }
                const projectId = this.projectId

                this.$store.dispatch('k8sTemplate/getConfigmaps', { projectId, version }).then(res => {
                    const data = res.data
                    const keyList = []
                    data.forEach(item => {
                        const list = []
                        const name = item.name
                        const keys = item.keys
                        item.id = item.name
                        keys.forEach(key => {
                            const params = {
                                id: name + '.' + key,
                                name: name + '.' + key,
                                nameCache: name,
                                keyCache: key
                            }
                            list.push(params)
                            keyList.push(params)
                        })
                        item.childList = list
                    })

                    this.volumeConfigmapList = data
                    this.configmapKeyList.splice(0, this.configmapKeyList.length, ...keyList)
                    this.configmapList.splice(0, this.configmapList.length, ...data)
                }, res => {
                    const message = res.message
                    this.$bkMessage({
                        theme: 'error',
                        message: message
                    })
                })
            },

            initVloumeSelectets () {
                const version = this.curVersion
                if (!version) {
                    return false
                }
                const projectId = this.projectId

                this.$store.dispatch('k8sTemplate/getSecrets', { projectId, version }).then(res => {
                    const data = res.data
                    const keyList = []
                    data.forEach(item => {
                        const list = []
                        const name = item.name
                        const keys = item.keys
                        keys.forEach(key => {
                            const params = {
                                id: name + '.' + key,
                                name: name + '.' + key,
                                nameCache: name,
                                keyCache: key
                            }
                            list.push(params)
                            keyList.push(params)
                        })

                        item.childList = list
                    })
                    this.volumeSecretList = data
                    this.secretKeyList.splice(0, this.secretKeyList.length, ...keyList)
                    this.secretList.splice(0, this.secretList.length, ...data)
                }, res => {
                    const message = res.message
                    this.$bkMessage({
                        theme: 'error',
                        message: message
                    })
                })
            },

            initMetricList () {
                const projectId = this.projectId
                this.$store.dispatch('k8sTemplate/getMetricList', projectId)
            },

            initLinkLabels () {
                const projectId = this.projectId
                const versionId = this.curVersion
                this.$store.dispatch('k8sTemplate/getApplicationLinkLabels', { projectId, versionId }).then(res => {
                    const data = res.data
                    this.curApplicationLinkLabels = []
                    for (const key in data) {
                        const keys = key.split(':')
                        if (keys.length >= 2) {
                            this.curApplicationLinkLabels.push({
                                key: keys[0],
                                value: keys[1],
                                linkMessage: `标签 (${key}) 已经被Service (${data[key].join('；')}) 关联，使用该标签的应用会被关联的Service导流`
                            })
                        }
                    }
                }, res => {
                    this.curApplicationLinkLabels = []
                })
            }
        }
    }
</script>
<style scoped>
    @import './deployment.css';
</style>
